<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>条件渲染</title>
	<script src="lib/vue-2.1.3-min.js"></script>
	<script src="lib/lodash.min.js"></script>
</head>
<body>
	<div id="condition1">
		<h1 v-if="showTitle">VueJs, 两秒后隐藏</h1>
		<h1 v-else>Vue Cli</h1>
	</div>
	
	<script>
		var vm = new Vue({
			el: "#condition1", 
			data: {
				showTitle: true
			}
		});

		setTimeout(function(){
			vm.showTitle = false;
		}, 2000);
	</script>

	<div id="condition2">
		<template v-if="loginType === 'username'"> 
			<label for="username">username</label>
			<input type="text" name="username" placeholder="username">
		</template>
		<template v-else>
			<label for="email">email</label>
			<input type="text" name="email" placeholder="email">
		</template>
	</div>
	<script>
		var vm = new Vue({
			el: "#condition2", 
			data: {
				loginType: "username"
			}
		});
		setTimeout(function(){
			vm.$data.loginType = "email"
		}, 3000);
	</script>

	<p>
		
		v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。
	</p>
</body>
</html>